import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import React, { forwardRef, useImperativeHandle, useState } from "react";
import {
  Modal,
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  Pressable,
} from "react-native";

import Icon from "react-native-vector-icons/AntDesign";
import { ParamList } from "../types/NavigationTypes";
import ModalController from "./ModalController";
import apiService, { LoginType } from "../services/ApiServices";
import DeviceInfo from "react-native-device-info";
import userManager from "../common/userManager";

const LoginModal = forwardRef((props, ref) => {
  const [isChecked, setChecked] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const navigation =
    useNavigation<NativeStackNavigationProp<ParamList, "Web">>();

  const _onClose = () => {
    ModalController.hideModal();
  };

  useImperativeHandle(
    ref,
    () => ({
      show: (data?: any) => {
        setModalVisible(true);
      },
      hide: () => {
        setModalVisible(false);
      },
    }),
    []
  );

  const guestLogin = async () => {
     const id = await DeviceInfo.getUniqueId();
     const result = await apiService.login(LoginType.Guest, id, "");
     await userManager.setUserInfo(JSON.stringify(result));
  };

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={modalVisible}
      onRequestClose={_onClose}
    >
      <View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)" }}>
        <View style={styles.modalView}>
          <TouchableOpacity
            onPress={_onClose}
            style={{ position: "absolute", right: 15, top: 15 }}
          >
            <Icon name="close" size={24} color="black" />
          </TouchableOpacity>
          <Image
            source={require("../../assets/images/icon_logo.png")}
            style={styles.logo}
          />
          <TouchableOpacity>
            <View style={styles.button}>
              <Text style={styles.buttonText}>手机号码登录</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={guestLogin}>
            <View style={[styles.button, { backgroundColor: "#DDDDDD" }]}>
              <Text style={[styles.buttonText, { color: "black" }]}>
                游客登录
              </Text>
            </View>
          </TouchableOpacity>

          <View
            style={{
              flexDirection: "row",
              alignItems: "flex-end",
              marginTop: 16,
              marginHorizontal: 25,
            }}
          >
            <Pressable onPress={() => setChecked(!isChecked)}>
              <Image
                source={
                  isChecked
                    ? require("../../assets/images/icon_checkbox_selected.png")
                    : require("../../assets/images/icon_checkbox_normal.png")
                }
                style={{ width: 36, height: 36 }}
              />
            </Pressable>

            <Text style={styles.baseText}>
              我已阅读并同意
              <Text
                style={styles.linkText}
                onPress={() => {
                  ModalController.hideModal();
                  navigation.navigate("Web", {
                    title: "隐私政策",
                    url: "https://m.imusic.cn/h5/privacy_policy_page",
                  });
                }}
              >
                《隐私政策》
              </Text>
              和
              <Text
                style={styles.linkText}
                onPress={() => {
                  ModalController.hideModal();
                  navigation.navigate("Web", {
                    title: "用户协议",
                    url: "https://m.imusic.cn/imapp/wangzpicy",
                  });
                }}
              >
                《用户协议》
              </Text>
              ，未注册的手机号将自动创建账号
            </Text>
          </View>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              marginTop: 30,
            }}
          >
            <View
              style={{ width: 100, height: 1, backgroundColor: "#E0E0E0" }}
            />
            <Text
              style={{ color: "#999999", fontSize: 13, marginHorizontal: 20 }}
            >
              更多登录方式
            </Text>
            <View
              style={{ width: 100, height: 1, backgroundColor: "#E0E0E0" }}
            />
          </View>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              marginTop: 20,
            }}
          >
            <Image
              source={require("../../assets/images/icon_wechat_login.png")}
              style={{ width: 40, height: 40, marginHorizontal: 10 }}
            />
            <Image
              source={require("../../assets/images/icon_qq_login.png")}
              style={{ width: 40, height: 40, marginHorizontal: 10 }}
            />
            <Image
              source={require("../../assets/images/icon_apple_login.png")}
              style={{ width: 40, height: 40, marginHorizontal: 10 }}
            />
          </View>
        </View>
      </View>
    </Modal>
  );
});

const styles = StyleSheet.create({
  modalView: {
    backgroundColor: "white",
    borderRadius: 20,
    padding: 10,
    height: 520,
    position: "absolute",
    bottom: 0,
    width: "100%",
    flex: 1,
  },
  button: {
    alignItems: "center",
    backgroundColor: "#3BC859",
    padding: 10,
    borderRadius: 8,
    marginTop: 20,
    marginHorizontal: 30,
  },
  buttonText: {
    color: "white",
    fontSize: 15,
  },
  logo: {
    marginTop: 40,
    width: 80,
    height: 80,
    resizeMode: "cover",
    alignSelf: "center",
  },
  baseText: {
    marginLeft: 2,
    marginRight: 30,
    fontSize: 13,
    color: "black",
  },
  linkText: {
    color: "#3BC859",
  },
});

export default LoginModal;
